<!--
 * @Author: 曹捷
 * @Date: 2020-04-22 14:28:38
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-08-03 09:54:00
 * @Description: 面包屑  两种形式 
  1放在header里面
  2放在body里面 breadcrumb-content
 -->
<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group class="breadcrumb" name="breadcrumb">
      <el-breadcrumb-item :key="'bread'+index" v-for="(item,index) in levelList">
        <span class="no-redirect" v-if="item.path==='noRedirect'||index==levelList.length-1">{{ item.menuName }}</span>
        <a @click.prevent="handleLink(item)" v-else>{{ item.menuName }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import util from './../../utils/utils.js'
import config from '@/config/config'
export default {
  data () {
    return {
      levelList: null,
      lastRouter: {}
    }
  },
  watch: {
    $route (list) {
      this.getBreadcrumb()
    },
    '$store.state.app.lastBreadcrumb': function (newInfo, oldInfo) {
      this.getBreadcrumb()
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    /**
     * 获取当前路径 所有上级的面 包屑 
     */
    getBreadcrumb () {
      let menuInfo = config.menu
      let listMean = util.localstorage.get('listM')
      let routerId = this.$store.state.app.router
      let lastRoute = listMean.find(el => el[menuInfo.key] == routerId)
      let arr = [lastRoute]
      function getRouterParent (item) {
        let findItem = listMean.find(el => el[menuInfo.key] == item[menuInfo.parentId])
        if (findItem) {
          arr.unshift(findItem)
          getRouterParent(findItem)
        }
      }
      if (lastRoute) {
        getRouterParent(lastRoute)
      }
      let breadArr = []
      arr.forEach(el => {
        breadArr.push({
          menuName: el[menuInfo.name],
          path: el[menuInfo.path]
        })
      });
      if (lastRoute && lastRoute[menuInfo.path] !== this.$route.path) {
        breadArr.push({
          menuName: this.$route.meta.title,
          path: this.$route.path
        })
      }
      this.levelList = breadArr
    },
    isDashboard (route) {
      const name = route && route.menuCode
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'main'.toLocaleLowerCase()
    },
    handleLink (item) {
      const { path } = item
      if (path) {
        if (path === this.$route.path) {
          return
        }
        this.$router.push(path)
        return
      } else {
        this.$router.push({ path: '/' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  padding-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
// 面包屑在主体里面
.app-breadcrumb.breadcrumb-content {
  line-height: normal !important;
  width: 100%;
  .breadcrumb {
    float: right;
    padding-right: 20px;
  }
}
</style>
